<template>
  <el-dialog
    :title="(id?'修改字典':'添加字典') + (dialogType===1 ? '分类':'')"
    :visible.sync="value"
    :before-close="cancel"
    width="40%"
  >
    <el-row>
      <el-col :span="24">
        <el-form :model="dialogForm" ref="dialogForm" :rules="rules" label-width="80px">
          <el-col :span="24">
            <el-form-item label="字典分类" prop="typeId" v-if="isShowDicType">
              <Treeselect
                v-model="dialogForm.typeId"
                placeholder="请选则上级部门"
                :options="dicTypes"
                :normalizer="normalizer"
              ></Treeselect>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称" prop="name">
              <el-input size="small" v-model="dialogForm.name" placeholder="请输入名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="编码" prop="code">
              <el-input size="small" v-model="dialogForm.code" placeholder="请输入编码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="值" prop="value" v-if="dialogType === 2">
              <el-input size="small" v-model="dialogForm.value" placeholder="请输入值"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" v-if="dialogType === 2">
              <el-radio-group v-model="dialogForm.status">
                <el-radio :label="1">正常</el-radio>
                <el-radio :label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="描述" prop="descript">
              <el-input
                type="textarea"
                size="small"
                v-model="dialogForm.descript"
                placeholder="请输入描述"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-col>
    </el-row>
    <div slot="footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { saveDicType, updateDicType, saveDict, updateDict } from "@/api/dict";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Treeselect from "@riophae/vue-treeselect";
export default {
  props: {
    value: Boolean,
    type: Number,
    dicTypes: {
      type: Array,
      default: []
    }
  },
  components: { Treeselect },
  data() {
    return {
      id: null,
      dicType: null,
      isShowDicType: true,
      dicTypeForm: {
        id: null,
        tname: "",
        tcode: "",
        descript: ""
      },
      dialogForm: {
        name: "",
        code: "",
        value: "",
        descript: "",
        status: 1,
        typeId: null
      },
      rules: {
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        code: [
          { required: true, message: "编码不能为空", trigger: "blur" },
          {
            required: true,
            trigger: "blur",
            validator: (rule, val, callback) => {
              const regx = /\W+/;
              if (regx.test(val)) {
                callback(new Error("编码只能是【字母 | 数字 | 下划线】组成"));
              } else {
                callback();
              }
            }
          }
        ],
        value: [{ required: true, message: "值不能为空", trigger: "blur" }],
        typeId: [
          {
            require: true,
            trigger: "blur",
            validator: (rule, value, callback) => {
              console.log(value);
              if (!value) {
                callback(new Error("字典分类不能为空"));
              } else {
                callback();
              }
            }
          }
        ]
      }
    };
  },
  computed: {
    dialogType() {
      return this.type ? this.type : this.dicType;
    }
  },
  methods: {
    init(row, type) {
      this.dicType = type;
      const obj = { ...row };
      this.id = row.id;
      if (type === 1) {
        this.isShowDicType = obj.isShowDicType;
        this.dialogForm.typeId = obj.dicTypePid;
        this.dialogForm.name = obj.tname;
        this.dialogForm.code = obj.tcode;
        this.dialogForm.descript = obj.descript;
      }

      if (type === 2) {
        this.dialogForm = obj;
      }
    },
    submit() {
      this.$refs["dialogForm"].validate(async isOk => {
        if (isOk) {
          // 添加分类
          if (this.dialogType === 1) {
            this.dicTypeForm.tname = this.dialogForm.name;
            this.dicTypeForm.tcode = this.dialogForm.code;
            this.dicTypeForm.descript = this.dialogForm.descript;
            if (this.id) {
              this.dicTypeForm.id = this.id;
              await updateDicType(this.dicTypeForm);
            } else {
              this.dicTypeForm.pid = this.dialogForm.typeId;
              await saveDicType(this.dicTypeForm);
            }
          }

          // 添加字典
          if (this.dialogType === 2) {
            if (this.id) {
              await updateDict(this.dialogForm);
            } else {
              await saveDict(this.dialogForm);
            }
          }
          this.cancel() // 重置数据
          // 重新刷新数据
          this.$emit("refresh");
        }
      });
    },
    cancel() {
      this.$refs["dialogForm"].resetFields();
      this.dialogForm = {
        name: "",
        code: "",
        value: "",
        descript: "",
        status: 1,
        typeId: null
      };
      this.dicTypeForm = {
        id: null,
        tname: "",
        tcode: "",
        descript: ""
      };
      this.isShowDicType = true;
      this.$emit("input", false);
    },
    normalizer(node) {
      //去掉children=[]的children属性
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        //将name转换成必填的label键
        label: node.tname,
        children: node.children
      };
    }
  }
};
</script>

<style>
</style>